<template>
  <div>
    <h2 class="title">用户注册</h2>
    <a-form
      :model="loginForm"
      style="max-width: 480px; margin: 0 auto"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item
        label="用户名"
        name="username"
        :rules="[{ required: true, message: '请输入用户名!' }]"
      >
        <a-input v-model:value="loginForm.username"></a-input>
      </a-form-item>
      <a-form-item
        label="密码"
        name="loginPassword"
        :rules="[{ required: true, message: '请输入密码!' }]"
      >
        <a-input v-model:value="loginForm.loginPassword" type="loginPassword"></a-input>
      </a-form-item>
      <a-form-item
        label="确认密码"
        name="checkPassword"
        :rules="[{ required: true, message: '请再次输入密码!' }]"
      >
        <a-input v-model:value="loginForm.checkPassword" type="loginPassword"></a-input>
      </a-form-item>
      <a-form-item
        :wrapper-col="{ offset: 8, span: 16 }"
        style="display: flex; justify-content: space-between"
      >
        <a-button html-type="submit" type="primary" @click="handleSubmit">注册</a-button>
        <a-button html-type="reset" style="margin: 0 8px" @click="handleReset">重置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { userRegister } from '@/api/user'

// 定义 loginForm 的类型
interface LoginForm {
  username: string
  loginPassword: string
  checkPassword: string
}

// 使用 reactive 并指定类型
const loginForm = reactive<LoginForm>({
  username: '',
  loginPassword: '', // 修改为 password，与模板中一致
  checkPassword: '',
})

// 示例方法：表单提交
function handleSubmit() {
  if (loginForm.loginPassword !== loginForm.checkPassword) {
    alert('两次输入的密码不一致！')
    return
  }
  userRegister(loginForm).then(res => {
    const { code, message } = res;
    if (code === 200) {
      alert('注册成功！')
      // router.push('/login')
    } else {
      alert(message)
    }
  })
}

// 示例方法：重置表单
function handleReset() {
  loginForm.username = ''
  loginForm.loginPassword = ''
  loginForm.checkPassword = ''
}

// 导出方法以便在模板中使用
defineExpose({ handleReset, handleSubmit })
</script>

<style>
.title {
  align-items: center;
}
</style>
